<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社团详情</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
    #clubData{
        width: 1100px;
        margin: auto;
    }
    #clubName{
        padding: 20px;
        height: 80px;
    }
    #clubName>div:first-child{
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
        width: 500px;
        float: left;
    }
    #clubImage{
        padding: 20px;
    }
    /*去浮动*/
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }
</style>
<body>
<div id="clubData">
    <div id="clubName" class="clear">
        <div>{{club.clubName}}</div>
        <div style="float: right;width: 100px">
            <input type="button" class="btn btn-danger" value="加入社团" v-if="club.newMember == 1" @click="joinClub">
            <input type="button" class="btn btn-secondary" disabled value="加入社团" v-else>
        </div>
    </div>
    <hr>
    <div id="clubImage">
        <img :src="'img/'+club.clubHead" width="600px" height="400px" style="margin-left: 240px">
    </div>
    <div>
        <div style="font-size: 18px;font-weight: bold;">社团简介</div>
        <div style="margin-left: 100px">
            <input type="text" :value="club.clubIntroduction" disabled style="height: 100px;width: 1000px">
        </div>
    </div>
    <div id="clubStudent clear">
        <div style="height: 28px" class="clear">
            <div style="font-size: 18px;font-weight: bold;float: left">社团人员</div>
            <div style="float: right">
                <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
                </svg>
                {{getStudentLen}}人
            </div>
        </div>
        <div class="clear">
            <div class="card" style="width: 15rem;float: left;margin: 10px" v-for="student in getBoss" :key="student.studentId">
                <img :src="'img/head/'+student.head" class="card-img-top" >
                <div class="card-body">
                    <h5 class="card-title">{{student.studentName}}</h5>
                    <h6>社长</h6>
                </div>
            </div>
            <div class="card" style="width: 15rem;float: left;margin: 10px" v-for="student in getMalo" :key="student.studentId">
                <img :src="'img/head/'+student.head" class="card-img-top" >
                <div class="card-body">
                    <h5 class="card-title">{{student.studentName}}</h5>
                    <h6>管理员</h6>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div id="clubNews" style="width: 1100px;margin-top: 20px">
        <div style="font-size: 18px;font-weight: bold">社团新闻</div>
        <div style="padding: 10px;cursor: pointer" v-for="clubNew in news">
            <div class="clear" >
                <div style="float: left">{{clubNew.newsTitle}}</div>
                <div style="float: right">{{ formatDate(clubNew.newsTime) }}</div>
            </div>
        </div>
    </div>
    <div id="clubActivity" style="width: 1100px;margin-top: 20px;margin-bottom: 20px">
        <div style="font-size: 18px;font-weight: bold">社团活动</div>
        <div style="padding: 10px;cursor: pointer" v-for="clubAct in activities">
            <div class="clear" @click="gotoInfo(clubAct.activityId)">
                <div style="float: left">{{clubAct.activityName}}</div>
                <div style="float: right">{{ formatDate(clubAct.startTime) }}</div>
            </div>
        </div>
    </div>
    <div style="height: 100px"></div>
</div>
</body>
</html>
<script>
    $(function(){
        let clubId = getData().clubId;
        console.log(clubId);

        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            alert(response.message);
                            window.location.href = "login.html";
                        } else {
                            resolve(response.data.loginUser.studentId);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function ClubStudent(clubId, studentId) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "clubMembers/" + clubId + "/" + studentId,
                    type: "get",
                    dataType: "json",
                    success: function(req) {
                        resolve(req.state);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function getRequest(clubId, studentId) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "request/" + studentId + "/" + clubId,
                    type: "get",
                    dataType: "json",
                    success: function(req) {
                        resolve(req.state);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function addRequest(clubId, studentId) {
                $.ajax({
                    url: "insert/" + studentId + "/" + clubId,
                    type: "get",
                    dataType: "json",
                    success:function (req){
                        console.log("添加成功")
                    }
                });
        }

        $.ajax({
            url: "clubData/" + clubId,
            type: "get",
            dataType: "json",
            success: function(req) {
                app.students = req.students;
                app.activities = req.activity;
                app.news = req.news;
                app.club = req.club;
            }
        });

        let app = new Vue({
            el: "#clubData",
            data: {
                students: {},
                club: {},
                news: {},
                activities: {}
            },
            computed: {
                getBoss() {
                    return this.students.filter(student => student.role === 1);
                },
                getMalo() {
                    return this.students.filter(student => student.role === 2);
                },
                getStudentLen() {
                    return this.students.length;
                }
            },
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                gotoInfo(actId) {
                    location.href = "activityinfo.html?activityId=" + actId;
                },
                async joinClub() {
                    try {
                        let studentId = await LoginVerify();
                        console.log(studentId);
                        if (studentId != null) {
                            let b = await ClubStudent(this.club.clubId, studentId);

                            if (b === 200) {
                                let c = await getRequest(clubId,studentId);
                                if(c === 200){
                                    // 成功加入社团的操作
                                    addRequest(clubId,studentId)
                                    window.alert("添加成功")
                                }else {
                                    window.alert("请勿重复发起申请")
                                }

                            } else {
                                window.alert("你已是该社团的学生");
                            }
                        }
                    } catch (error) {
                        console.error("Error joining club:", error);
                    }
                }
            }
        });
    });
</script>